<template>
    <div class="p-2">
        <el-row :gutter="20">
            <el-col :lg="4" :xs="24" style="">
                <el-card shadow="hover" style="height: 600px;">
                    <el-input v-model="geName" placeholder="请输入家谱目录" prefix-icon="Search" clearable />
                    <el-tree
                        ref="geTreeRef"
                        class="mt-2"
                        node-key="id"
                        :data="deptOptions"
                        icon="Folder"
                        :props="{ label: 'label', children: 'children' } as any"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        highlight-current
                        default-expand-all
                        @node-click="handleNodeClick"
                    />
                </el-card>
            </el-col>
            <el-col :lg="20" :xs="24">
                <el-card>
                    <div style="display: flex; justify-content: flex-end">
                        <div>
                            <el-button type="primary" @click="submitForm()">保存</el-button>
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover">
                    <el-form ref="infoFormRef" :model="form" :rules="rules"  label-width="80px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="标题" prop="infoName">
                                    <el-input v-model="form.infoName" @focus="nameFocus" placeholder="请输入标题" maxlength="30" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="内容" prop="remark">
                                    <EditorPlus v-model="form.remark"></EditorPlus>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script setup name="User" lang="ts">
import {updateInfo,addInfo,listInfo} from '@/api/genealogy/info';
import { DirectoryTreeVO,InfoForm,InfoVO,InfoQuery } from '@/api/genealogy/info/types';
import {directoryTreeSelect} from '@/api/genealogy/info';
import EditorPlus from '@/components/EditorPlus/index.vue';
import { AxiosResponse } from 'axios';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;


const infoFormRef = ref<ElFormInstance>();
const geName = ref('');
const deptOptions = ref<DirectoryTreeVO[]>([]);

const initFormData:InfoForm = {
    id:undefined,
    geId:undefined,
    infoType: undefined,
    infoName:undefined,
    remark:undefined
}

const data = reactive<PageData<InfoForm, InfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    infoType:undefined
  },
  rules: {
    remark: [{ required: true, message: '族谱内容不能为空', trigger: 'blur' }],
  }
});

const { form, rules, queryParams} = toRefs(data);

/** 通过条件过滤节点  */
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

/** 查询族谱目录结构 */
const getDirectoryTree = async () => {
  const res = await directoryTreeSelect();
  deptOptions.value = res.data;
};

/** 节点单击事件 */
const handleNodeClick = async (data: DirectoryTreeVO) => {
    form.value.infoType = data.code;
    form.value.geId = data.geId;
    queryParams.value.infoType = data.code;
    await listInfo(queryParams.value).then(res=>{
        const rows = res.rows;
        if(rows.length>0){
            const infoVo:InfoVO = rows[0];
            form.value.id = infoVo.id;
            form.value.infoName = infoVo.infoName;
            form.value.remark = infoVo.remark;
        }else{
            form.value.id = '';
            form.value.infoName = '';
            form.value.remark = '';
        }
    })
};

/**
 * 点击保存触发事件
 */
const  submitForm = () =>{
    debugger
    if(form.value.infoType==undefined){
        proxy?.$modal.msgWarning("请选择左侧类型！");
        return
    }
    infoFormRef.value?.validate(async (valid: boolean) => {
        let res: AxiosResponse<InfoVO>;
        if (form.value.id) {
          res = await updateInfo(form.value);
        } else {
          res = await addInfo(form.value);
        }
        if(res.data!=null){
            form.value = res.data;
            proxy?.$modal.msgSuccess('保存模板成功!');
        }else{
            proxy?.$modal.msgWarning(res.msg);
        }
        
    });
}

/**
 * 
 * @param e 标题获取焦点触发事件，校验是否点击左侧菜单
 */
const nameFocus = (event)=>{
    if(typeof form.value.infoType == "undefined"){
        proxy?.$modal.msgWarning('请选择家谱目录!');
        form.value.infoName ='';
        form.value.remark='';
    }
}

onMounted(() =>{
    getDirectoryTree();
})

</script>
  